<template>
	<el-container>
        <el-dialog :title="titleMap[mode]" v-model="visible" width="85%" destroy-on-close @closed="$emit('closed')" fullscreen="true">
            <el-steps :style="'max-width: '+windowWidth" active="2" finish-status="success" align-center>
                <el-step title="下单时间" :description="form.create_time"/>
                <el-step title="发货时间" :description="form.deliver_time"/>
                <el-step title="收货时间" :description="form.shouhuo_time"/>
                <el-step title="交易完成" :description="form.shouhuo_time"/>
            </el-steps>
            <el-card shadow="never" header="订单信息" style="margin-top: 20px;">
			<el-descriptions border :column="1">
				<el-descriptions-item label="订单编号">{{ form.ordernum }}</el-descriptions-item>
				<el-descriptions-item label="订单金额">{{ form.shi_money }}</el-descriptions-item>
				<el-descriptions-item label="实付金额">{{ form.money }}</el-descriptions-item>
				<el-descriptions-item label="是否付款">{{ form.status==1?'是':'否' }}</el-descriptions-item>
				<el-descriptions-item label="订单状态">{{ form.os}}</el-descriptions-item>
				<el-descriptions-item label="收款信息">{{ form.uname }} , {{form.phone}} , {{ form.address }}</el-descriptions-item>
				<el-descriptions-item label="流水号">{{form.tradenum}}</el-descriptions-item>
                <el-descriptions-item label="用户留言">{{form.mess}}</el-descriptions-item>
                <el-descriptions-item label="订单备注">{{form.remarks}}</el-descriptions-item>
                <el-descriptions-item label="下单时间">{{form.create_time}}</el-descriptions-item>
                <el-descriptions-item label="支付时间">{{form.pay_time}}</el-descriptions-item>
			</el-descriptions>
		    </el-card>

            <el-card shadow="never" header="商品信息" style="margin-top: 20px;">
                <el-table :data="form.carts" border style="width: 100%;margin-top: 5px;">
                <el-table-column prop="pro_title" label="商品名称" />
                <el-table-column prop="pro_can" label="商品规格" width="180" />
                <el-table-column prop="price" label="商品价格" width="180" />
                <el-table-column prop="num" label="商品数量" width="80"/>
                </el-table>

		    </el-card>


            <el-card shadow="never" header="物流信息" style="margin-top: 20px;">
			<el-descriptions border :column="1">
				<el-descriptions-item label="快递公司">{{ form.express_company }}</el-descriptions-item>
				<el-descriptions-item label="快递编号">
                        <span v-if="form.status==1 && form.order_status > 1">{{ form.express_no }}</span>
                        <el-input v-if="form.status==0 || form.order_status <= 1" v-model="form.express_no"></el-input>
                </el-descriptions-item>
			</el-descriptions>
		    </el-card>


            
            

	   </el-dialog>
	</el-container>
</template>

<script>
	export default {
        emits: ['success', 'closed'],
		data() {
			return {
                windowWidth: window.innerWidth - 100,
				mode: "add",
				titleMap: {
					add: '新增',
					edit: '编辑',
					details: '订单详细'
				},
				visible: false,
				isSaveing: false,
				//表单数据
				form: {},
				//验证规则
				rules: {
 
					name: [
						{required: true, message: '请输入名称'}
					],
					code: [
						{required: true, message: '请输入编码'}
					]
				}
			}
		},
		mounted() {

		},
		methods: {
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
			//表单提交方法
			submit(){
				this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
						var res = await this.$API.demo.express_post.post(this.form);
						this.isSaveing = false;
						if(res.code == 200){
							this.$emit('success', this.form, this.mode)
							this.visible = false;
							this.$message.success("操作成功")
						}else{
							this.$alert(res.message, "提示", {type: 'error'})
						}
					}
				})
			},
			//表单注入数据
			setData(data){
				 this.form = data
			}
		}
	}
 
</script>

<style>
</style>
